<template>
  <div style="padding: 45px 0">
    <!-- 只有变量才有类型, 所以必须用 :来绑定属性才能看到类型检测的效果 -->
    <my-header title="购物车案例"></my-header>
    <my-goods v-for="item in list" :key="item.id" :goods="item"></my-goods>
    <!-- <my-footer @checkAll="checkAllHandler" :list="list"></my-footer> -->
    <my-footer :list="list"></my-footer>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeade";
import MyGoods from "./components/MyGood";
import MyFooter from "./components/MyFoote";

export default {
  name: "ShopcarApp",
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },

  data() {
    return {
      list: [],
    };
  },

  created() {
    // this 就是当前组件 Vue 实例
    // console.dir(this)
    this.$axios({
      url: "/api/cart",
    }).then((res) => {
      this.list = res.data.list;
    });
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>